<template>
  <div class="content">
    <div class="title">
      云锁查看
    </div>

    <div class="head">
        <div class="left">
          <input v-model="keywords" @keyup.enter="search()" placeholder="请输入搜索内容..." type="text">
          <div class="sousuo"  @click="search()">
            <img src="../assets/img/sou.png" alt="">
            搜索
          </div>
        </div>


      </div>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;margin-top:20px;">

        <el-table-column
              type="selection"
              fixed
              width="55">
            </el-table-column>
          <!-- <el-table-column
                type="index"
                fixed
                width="50">
           </el-table-column> -->
        <el-table-column
          prop="id"
          label="锁ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="lockname"
          label="锁名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="admin_user_id"
          label="组织ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="company"
          label="组织名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="admin_mobile"
          label="管理员电话"
          width="180">
        </el-table-column>
         <el-table-column
           prop="init_order"
           label="订单编号"
           width="180">
         </el-table-column>
         <el-table-column
           prop="init_name"
           label="初始化人员"
           width="180">
         </el-table-column>
         <el-table-column
           prop="init_time"
           label="初始化时间"
           width="180">
         </el-table-column>
         <el-table-column
           prop="unlock_name"
           label="最后开锁人员"
           width="180">
         </el-table-column>
         <el-table-column
           prop="unlock_time"
           label="最后开锁时间"
           width="180">
         </el-table-column>
         <el-table-column
           prop="getpwd_name"
           label="最后取密码人员"
           width="180">
         </el-table-column>
         <el-table-column
           prop="get_pwd"
           label="最后取密码时间"
           width="180">
         </el-table-column>
        <el-table-column
        width="180"
        label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini" @click='edit(scope.row)'>编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"  @click='delete_lock(scope.row)'>删除</el-button>
              </template>
            </el-table-column>
      </el-table>

   <div class="page">
                   <el-pagination
                     background
                     @current-change='current'
                     @prev-click='prev'
                     @next-click='next'
                     :page-size='page'
                     layout="prev, pager, next"
                     :total="count">
                   </el-pagination>
                 </div>



      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
       >
       <el-form   label-width="100px" class="demo-ruleForm">
        <el-form-item label="锁名称" >
         <el-input v-model="submit.name"></el-input>
           </el-form-item>
       </el-form>
       <div class="btn">
         <span @click="locksubmit">提交</span>
         <span @click="cancle">取消</span>
       </div>
      </el-dialog>













  </div>
</template>

<script>
  import {lock_list,edit_lock,delete_lock} from '../js/getApi.js'
  export default{
    name:'ke_info',
    data(){
      return{
        count:0,
        page:8,
        dialogVisible:false,
        tableData:[],
        submit:{
          id:'',
          name:''
        },
        keywords:''
      }
    },
    methods:{
      current(val){
         this.getlist(val,this.page);
      },
      prev(val){
          this.getlist(val,this.page);
      },
      next(val){
          this.getlist(val,this.page);
      },
      async  search(){
          const data=await lock_list(this.$store.state.token,this.keywords,1,this.page);
          this.tableData=data.list;
          this.count=data.count;
       },
       edit(row){
         this.dialogVisible=true;
         this.submit={id:row.lock_id,name:row.lockname};
       },
      async delete_lock(row){
         const data=await delete_lock(this.$store.state.token,row.lock_id);
          alert(data.msg);
         if(data.code==1){
           this.getlist(1,this.page);
         }
       },
       cancle(){
         this.dialogVisible=false;
       },
      async locksubmit(){
         const data=await edit_lock(this.$store.state.token,this.submit.id,'',this.submit.name,'');
          alert(data.msg);
         if(data.code==1){
           this.getlist();
           this.cancle();
         }
       },
       async getlist(page,size){
         const data=await lock_list(this.$store.state.token,'',page,size);
         this.count=data.count;
         this.tableData=data.list;
       }
    },
     created(){
       this.getlist(1,this.page)
     }
  }
</script>

<style scoped>
  .page{
   text-align: center;
   margin: 30px auto;
  }
.title{
      height: 84px;
      line-height: 84px;
      color: rgba(5, 5, 5, 100);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      border-bottom: 1px solid #F7F7F7;
  }

.title span{
  color: rgba(151, 152, 152, 100);
}
  .head{
    margin-top:33px;
   display: flex;
  }
  .head div{
    display: inline-block;
  }

  .head input{
    width: 190px;
    height:30px;
    border-radius:10px 0 0 10px;
    padding-left:10px;
    border: 1px solid rgba(187, 187, 187, 100);
    float: left;
  }
  .sousuo{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    color: #fff;
    cursor: pointer;
  }
  .sousuo img{
    width: 19px;
    height: 19px;
    vertical-align:middle;
  }


.btn{
     margin-left: 100px;
     margin-top: 100px;
     }
     .btn span{
       display:inline-block;
       cursor: pointer;
     }
  .btn span:nth-of-type(1){
       width: 100px;
       height: 34px;
       line-height:34px;
       border-radius: 2px;
       background-color: rgba(26, 188, 156, 100);
       color: rgba(255, 255, 255, 100);
       font-size: 14px;
       text-align: center;
       font-family: Roboto;
   }
   .btn span:nth-of-type(2){
       width: 100px;
       height: 34px;
       line-height:34px;
       border-radius: 2px;
       background-color: rgba(255, 255, 255, 100);
       color: rgba(26, 188, 156, 100);
       font-size: 14px;
       text-align: center;
       font-family: Roboto;
       border: 1px solid rgba(26, 188, 156, 100);
       margin-left: 20px;
      }

















</style>
